<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-创建一个实例</title>
</head>
<body>
    <!-- 创建Vue实例,初始化渲染
    1.准备容器(Vue所管理的范围)
    2.引入开发版本包，包含完整的注释和警告
    3.创建Vue实例
    4.添加配置项（完成渲染） -->
    <div id="app">
        {{ msg }}
        <br>
        <p>{{age>=18?'成年':'未成年'}}</p>
        <p>{{favorite.snack}}</p>
        <p>{{favorite.drink}}</p>

        <a href="https://www.w3school.com.cn/" target="_blank">{{adress}}</a>
    </div>
    <!-- 引入开发版本包，包含完整的注释和警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app=new Vue({
            // 通过el配置选择器，指定Vue管理的是哪个盒子
            el:'#app',
            data:{
                msg:'Hello Vue',
                adress:'学习Vue,来w3c',
                age:18,
                favorite:{
                    snack:'potato chip',
                    drink:'orange juice'
                }
            }
        })
    </script>

</body>
</html>